import React, { Component } from 'react';


/*
一、Router
import { BrowserRouter, HashRouter } from 'react-router-dom';


HashRouter ：利用监听hash变化（有一个事件hashchange）实现路由切换，它是路由容器，渲染子组件，并向下层子组件传递（Context上下文传递）loaction,history等路由信息

BrowserHistory ：利用H5Api实现路由切换，是路由容器，渲染子组件，并向子组件传递loaction,history等路由信息

二、link
Link
Nalink

提供导航链接 原理使用history.push()

三、Switch
import { NavLink,Switch,Redirect,Route} from 'react-router-dom';

<Switch>
</Switch>


四、Redirect:
<Redirect to="/"/>

五、exact
精确匹配
<Route exact path="/" component={Home} />
<NavLink exact to="/">首页</NavLink><br/>

六、路由传参

<Route exact path="/tab" component={Tab} />
<Route path={`/tab/:token`} component={Tab} />

ifPage(id){
    if(id){
        return <List id={id}/>
    }else {
        return <Detail/>
    }
}
render(){
    console.log(this.props)
    return this.ifPage(this.props.match.params.id)
}

七、内部信息history，location， match
match 传参
history.push('') 跳转
location 接近原生 上两个基本可以满足我们的需要

@withRouter
1.目的就是让被修饰的组件可以从属性中获取history,location,match
路由组件可以直接获取这些属性，而非路由组件就必须通过withRouter修饰后才能获取这些属性了
2.withRouter是专门用来处理数据更新问题的。


import { withRouter,NavLink} from 'react-router-dom';
export default withRouter(View); 之后才可以使用
this.props.history.push('/web1906');

通过Route渲染出来的组件内部都有路由信息（history，location， match）


八、nginx
location / {
        index index.html index.htm index.php default.html default.htm default.php;
        try_files $uri /index.html;
}
对首页 进行重写
**/
/**
    第一步
    yarn add react-router-dom
    第二步使用这个模块
    注意：原来直接index.js-->app.js
    新的就是index.js-->router.js--->app.js
    新建立一个router.js
    主要是包裹具体的所有路由页面（函数组件）
    <BrowserRouter>
        <App/>// 所有路由页面
    </BrowserRouter>
    第三步直接具体的新增加路由页面
    app.js

**/

class View extends Component {

    render(){
        return(
            <div>
                <h3>route</h3>
            </div>
        )
    }
}

export default View;
